<template>
  <div class="sales-training">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>💼 销售技巧训练</h1>
        <p>通过真实销售场景模拟，掌握专业销售技巧和话术</p>
      </div>
      <div class="game-stats">
        <el-statistic title="成交率" :value="gameStats.closingRate" suffix="%" />
        <el-statistic title="完成交易" :value="gameStats.deals" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 模式选择 -->
    <div v-if="!gameStarted" class="mode-selection">
      <h2>选择销售场景</h2>
      <div class="modes-grid">
        <div 
          v-for="mode in modes" 
          :key="mode.id"
          class="mode-card"
          @click="startMode(mode)"
        >
          <div class="mode-icon" :style="{ background: mode.color }">
            {{ mode.icon }}
          </div>
          <h3>{{ mode.name }}</h3>
          <p>{{ mode.description }}</p>
          <div class="mode-meta">
            <el-tag :type="mode.difficultyType" size="small">{{ mode.difficulty }}</el-tag>
            <span>{{ mode.scenarioCount }} 个场景</span>
            <span>💰 {{ mode.points }}积分</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 销售场景游戏 -->
    <div v-else class="sales-game">
      <div class="game-sidebar">
        <div class="customer-profile">
          <h3>👤 客户画像</h3>
          <el-avatar :src="currentCustomer.avatar" :size="80" />
          <h4>{{ currentCustomer.name }}</h4>
          <div class="customer-info">
            <p><strong>年龄：</strong>{{ currentCustomer.age }}岁</p>
            <p><strong>职业：</strong>{{ currentCustomer.occupation }}</p>
            <p><strong>需求：</strong>{{ currentCustomer.need }}</p>
            <p><strong>预算：</strong>{{ currentCustomer.budget }}</p>
          </div>
          <div class="customer-mood">
            <span>当前态度：</span>
            <el-tag :type="getMoodType(customerMood)" size="large">
              {{ customerMood }}{{ getMoodEmoji(customerMood) }}
            </el-tag>
          </div>
          <div class="trust-level">
            <span>信任度：</span>
            <el-progress 
              :percentage="trustLevel" 
              :color="getTrustColor(trustLevel)"
              :status="trustLevel >= 80 ? 'success' : undefined"
            />
          </div>
        </div>

        <div class="sales-tips">
          <h3>💡 销售技巧</h3>
          <ul>
            <li>建立信任关系</li>
            <li>倾听客户需求</li>
            <li>展示产品价值</li>
            <li>处理客户异议</li>
            <li>适时促成交易</li>
          </ul>
        </div>
      </div>

      <div class="game-main">
        <!-- 对话历史 -->
        <div class="conversation-history" ref="conversationRef">
          <div 
            v-for="(msg, index) in conversationHistory" 
            :key="index"
            class="message"
            :class="msg.role"
          >
            <div class="message-avatar">
              <el-avatar :src="msg.avatar" :size="40" />
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="sender-name">{{ msg.sender }}</span>
                <span class="message-time">{{ msg.time }}</span>
              </div>
              <div class="message-text">{{ msg.text }}</div>
              <div v-if="msg.impact" class="message-impact" :class="msg.impact.type">
                <el-icon v-if="msg.impact.type === 'positive'"><CircleCheck /></el-icon>
                <el-icon v-else-if="msg.impact.type === 'negative'"><CircleClose /></el-icon>
                <span>{{ msg.impact.text }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 销售阶段指示 -->
        <div class="sales-stage">
          <el-steps :active="currentStage" align-center>
            <el-step title="建立关系" icon="User" />
            <el-step title="挖掘需求" icon="Search" />
            <el-step title="产品介绍" icon="Goods" />
            <el-step title="处理异议" icon="ChatDotRound" />
            <el-step title="促成交易" icon="CircleCheck" />
          </el-steps>
        </div>

        <!-- 回复选项 -->
        <div v-if="showOptions" class="response-options">
          <h4>选择你的应对策略：</h4>
          <div class="options-grid">
            <div 
              v-for="(option, index) in currentOptions" 
              :key="index"
              class="option-card"
              :class="{ selected: selectedOption === index }"
              @click="selectOption(index)"
            >
              <div class="option-header">
                <span class="option-number">{{ index + 1 }}</span>
                <el-tag :type="getOptionType(option.technique)" size="small">
                  {{ option.technique }}
                </el-tag>
              </div>
              <p class="option-text">{{ option.text }}</p>
              <div class="option-effects">
                <span v-if="option.trust" class="effect-item">
                  信任度: <strong :class="{ positive: option.trust > 0, negative: option.trust < 0 }">
                    {{ option.trust > 0 ? '+' : '' }}{{ option.trust }}%
                  </strong>
                </span>
                <span v-if="option.mood" class="effect-item">
                  态度: {{ option.mood }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 特殊操作 -->
        <div v-if="showSpecialActions" class="special-actions">
          <h4>可用操作：</h4>
          <div class="actions-grid">
            <el-button 
              v-for="action in specialActions" 
              :key="action.id"
              :type="action.type"
              @click="useSpecialAction(action)"
            >
              <el-icon><component :is="action.icon" /></el-icon>
              {{ action.label }}
            </el-button>
          </div>
        </div>

        <!-- 确认按钮 -->
        <div class="action-buttons">
          <el-button 
            type="primary" 
            size="large"
            :disabled="selectedOption === null"
            @click="confirmResponse"
          >
            确认回复
          </el-button>
        </div>
      </div>
    </div>

    <!-- 结果对话框 -->
    <el-dialog
      v-model="showResultDialog"
      title="场景结果"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="result-content">
        <div class="result-icon" :class="dealResult.status">
          <el-icon v-if="dealResult.status === 'success'"><CircleCheck /></el-icon>
          <el-icon v-else-if="dealResult.status === 'failed'"><CircleClose /></el-icon>
          <el-icon v-else><QuestionFilled /></el-icon>
        </div>
        <h3>{{ dealResult.title }}</h3>
        <p>{{ dealResult.message }}</p>
        
        <div class="performance-analysis">
          <h4>📊 表现分析</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="信任度">{{ trustLevel }}%</el-descriptions-item>
            <el-descriptions-item label="客户态度">{{ customerMood }}</el-descriptions-item>
            <el-descriptions-item label="销售阶段">第{{ currentStage + 1 }}阶段</el-descriptions-item>
            <el-descriptions-item label="对话轮次">{{ conversationHistory.length }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="points-earned">
          <el-alert
            :title="`获得 ${dealResult.points} 积分`"
            :type="dealResult.status === 'success' ? 'success' : 'warning'"
            :closable="false"
            show-icon
          />
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="nextScenario">
          {{ currentScenario < totalScenarios ? '下一个场景' : '完成训练' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 训练完成 -->
    <el-dialog
      v-model="showCompleteDialog"
      title="训练完成"
      width="600px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="complete-content">
        <div class="final-score">
          <h2>综合评分</h2>
          <div class="score-display">{{ finalScore }}</div>
          <el-rate v-model="performanceRating" disabled show-score text-color="#ff9900" />
        </div>

        <div class="final-stats">
          <div class="stat-item">
            <span>成交场景:</span>
            <strong>{{ successCount }} / {{ totalScenarios }}</strong>
          </div>
          <div class="stat-item">
            <span>平均信任度:</span>
            <strong>{{ averageTrust }}%</strong>
          </div>
          <div class="stat-item">
            <span>成交率:</span>
            <strong>{{ Math.round((successCount / totalScenarios) * 100) }}%</strong>
          </div>
        </div>

        <el-alert
          :title="`获得 ${finalScore} 积分！`"
          type="success"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button @click="restartTraining">重新训练</el-button>
        <el-button type="primary" @click="goBack">返回游戏中心</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, CircleCheck, CircleClose, QuestionFilled,
  Document, Goods, Phone
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  closingRate: 68,
  deals: 34,
  points: 2850
})

// 训练模式
const modes = ref([
  {
    id: 1,
    name: '电话销售',
    icon: '📞',
    description: '通过电话沟通完成销售',
    difficulty: '简单',
    difficultyType: 'success',
    scenarioCount: 3,
    points: 120,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    id: 2,
    name: '面对面销售',
    icon: '👥',
    description: '与客户面对面交流促成交易',
    difficulty: '中等',
    difficultyType: 'warning',
    scenarioCount: 5,
    points: 200,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
  },
  {
    id: 3,
    name: '大客户销售',
    icon: '🏢',
    description: '处理复杂的B2B销售场景',
    difficulty: '困难',
    difficultyType: 'danger',
    scenarioCount: 4,
    points: 280,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  }
])

// 游戏状态
const gameStarted = ref(false)
const currentMode = ref(null)
const currentScenario = ref(1)
const totalScenarios = ref(5)
const currentStage = ref(0)
const trustLevel = ref(50)
const customerMood = ref('中立')
const showOptions = ref(true)
const showSpecialActions = ref(false)
const selectedOption = ref(null)
const conversationHistory = ref([])
const showResultDialog = ref(false)
const showCompleteDialog = ref(false)
const successCount = ref(0)
const averageTrust = ref(0)
const finalScore = ref(0)
const performanceRating = ref(3)
const conversationRef = ref(null)

// 当前客户
const currentCustomer = ref({
  name: '李经理',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  age: 35,
  occupation: '企业采购经理',
  need: '寻找高性价比的办公设备',
  budget: '5-10万'
})

// 当前对话选项
const currentOptions = ref([
  {
    text: '您好李经理，我是XX公司的销售顾问，很高兴为您服务。请问您目前在采购方面有什么需求吗？',
    technique: '开场白',
    trust: 10,
    mood: '友好',
    stage: 0
  },
  {
    text: '李经理您好，我这边有个非常好的产品，价格也很优惠，您要不要考虑一下？',
    technique: '直接推销',
    trust: -5,
    mood: '警惕',
    stage: 0
  },
  {
    text: '感谢您接听我的电话，李经理。我注意到贵公司最近在扩展业务，想了解一下您在办公设备方面是否有升级计划？',
    technique: '需求探询',
    trust: 15,
    mood: '友好',
    stage: 0
  }
])

// 特殊操作
const specialActions = ref([
  { id: 1, label: '展示案例', icon: 'Document', type: 'primary' },
  { id: 2, label: '产品演示', icon: 'Goods', type: 'success' },
  { id: 3, label: '价格优惠', icon: 'Discount', type: 'warning' }
])

// 交易结果
const dealResult = ref({
  status: 'success',
  title: '交易成功！',
  message: '您成功与客户建立了信任并促成了交易',
  points: 80
})

// 获取心情类型
const getMoodType = (mood) => {
  const map = {
    '友好': 'success',
    '中立': 'info',
    '警惕': 'warning',
    '抗拒': 'danger'
  }
  return map[mood] || 'info'
}

// 获取心情表情
const getMoodEmoji = (mood) => {
  const map = {
    '友好': '😊',
    '中立': '😐',
    '警惕': '🤔',
    '抗拒': '😤'
  }
  return map[mood] || ''
}

// 获取信任度颜色
const getTrustColor = (trust) => {
  if (trust >= 80) return '#67c23a'
  if (trust >= 60) return '#409eff'
  if (trust >= 40) return '#e6a23c'
  return '#f56c6c'
}

// 获取选项类型
const getOptionType = (technique) => {
  const map = {
    '开场白': 'success',
    '需求探询': 'primary',
    '产品介绍': 'warning',
    '异议处理': 'info',
    '促成交易': 'danger',
    '直接推销': 'danger'
  }
  return map[technique] || ''
}

// 开始模式
const startMode = (mode) => {
  currentMode.value = mode
  totalScenarios.value = mode.scenarioCount
  gameStarted.value = true
  resetScenario()
  
  ElMessage.success(`开始 ${mode.name} 训练！`)
}

// 重置场景
const resetScenario = () => {
  currentStage.value = 0
  trustLevel.value = 50
  customerMood.value = '中立'
  conversationHistory.value = []
  selectedOption.value = null
  showOptions.value = true
  
  // 添加客户开场白
  addMessage('customer', '您好，我想了解一下你们的产品。')
}

// 添加消息
const addMessage = async (role, text, impact = null) => {
  const message = {
    role: role,
    sender: role === 'customer' ? currentCustomer.value.name : '销售顾问',
    avatar: role === 'customer' ? currentCustomer.value.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    text: text,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
    impact: impact
  }
  
  conversationHistory.value.push(message)
  
  // 滚动到底部
  await nextTick()
  if (conversationRef.value) {
    conversationRef.value.scrollTop = conversationRef.value.scrollHeight
  }
}

// 选择选项
const selectOption = (index) => {
  selectedOption.value = index
}

// 确认回复
const confirmResponse = async () => {
  const option = currentOptions.value[selectedOption.value]
  
  // 添加销售顾问消息
  await addMessage('salesperson', option.text)
  
  // 更新状态
  trustLevel.value = Math.max(0, Math.min(100, trustLevel.value + (option.trust || 0)))
  customerMood.value = option.mood || customerMood.value
  
  if (option.stage !== undefined) {
    currentStage.value = Math.max(currentStage.value, option.stage)
  }
  
  // 添加影响提示
  if (option.trust) {
    const impact = {
      type: option.trust > 0 ? 'positive' : 'negative',
      text: option.trust > 0 ? `信任度+${option.trust}%` : `信任度${option.trust}%`
    }
    conversationHistory.value[conversationHistory.value.length - 1].impact = impact
  }
  
  showOptions.value = false
  selectedOption.value = null
  
  // 模拟客户回复
  setTimeout(() => {
    const customerResponses = getCustomerResponse()
    addMessage('customer', customerResponses)
    
    // 检查是否完成场景
    if (currentStage.value >= 4 || trustLevel.value >= 80) {
      setTimeout(() => {
        completeScenario(trustLevel.value >= 80)
      }, 1500)
    } else {
      // 生成新选项
      setTimeout(() => {
        generateNextOptions()
        showOptions.value = true
      }, 1000)
    }
  }, 1500)
}

// 获取客户回复
const getCustomerResponse = () => {
  const responses = {
    positive: [
      '嗯，听起来不错，请继续介绍。',
      '您说的很有道理，我很感兴趣。',
      '这确实是我需要的，能详细说说吗？'
    ],
    neutral: [
      '好的，我了解了。',
      '还有什么其他信息吗？',
      '让我再考虑考虑。'
    ],
    negative: [
      '我觉得价格有点高。',
      '这个和我的需求不太匹配。',
      '我需要再比较一下其他产品。'
    ]
  }
  
  let category = 'neutral'
  if (trustLevel.value >= 70) category = 'positive'
  else if (trustLevel.value < 40) category = 'negative'
  
  const list = responses[category]
  return list[Math.floor(Math.random() * list.length)]
}

// 生成下一轮选项
const generateNextOptions = () => {
  // 根据当前阶段生成不同的选项
  const stageOptions = {
    0: [ // 建立关系
      {
        text: '非常感谢您的时间，李经理。我了解到您在寻找高性价比的办公设备，能否详细说说您的具体需求？',
        technique: '需求探询',
        trust: 10,
        mood: '友好',
        stage: 1
      },
      {
        text: '我们的产品质量非常好，价格也很优惠，您一定会满意的！',
        technique: '产品介绍',
        trust: -5,
        stage: 1
      }
    ],
    1: [ // 挖掘需求
      {
        text: '根据您刚才提到的需求，我们有一款产品非常适合您。它不仅性价比高，而且售后服务完善。',
        technique: '产品介绍',
        trust: 15,
        stage: 2
      },
      {
        text: '您的预算大概是多少？我可以为您推荐合适的方案。',
        technique: '需求探询',
        trust: 5,
        stage: 1
      }
    ],
    2: [ // 产品介绍
      {
        text: '您提到的这个顾虑我完全理解。实际上，我们的产品在同类中性价比是最高的，而且有很多成功案例可以参考。',
        technique: '异议处理',
        trust: 20,
        stage: 3
      }
    ],
    3: [ // 处理异议
      {
        text: '李经理，根据您的需求和我们的讨论，我建议您现在就下单，这样可以享受本月的优惠价格。',
        technique: '促成交易',
        trust: 15,
        stage: 4
      }
    ]
  }
  
  currentOptions.value = stageOptions[Math.min(currentStage.value, 3)] || stageOptions[0]
}

// 使用特殊操作
const useSpecialAction = (action) => {
  ElMessage.success(`使用了${action.label}`)
  trustLevel.value = Math.min(100, trustLevel.value + 10)
}

// 完成场景
const completeScenario = (success) => {
  const points = success ? 80 : 40
  
  dealResult.value = {
    status: success ? 'success' : 'failed',
    title: success ? '🎉 交易成功！' : '😔 交易未达成',
    message: success ? 
      '您成功与客户建立了信任并促成了交易！展现了优秀的销售技巧。' :
      '虽然这次没有成功，但这是很好的学习机会。分析一下哪里可以改进吧。',
    points: points
  }
  
  if (success) {
    successCount.value++
  }
  
  showResultDialog.value = true
}

// 下一个场景
const nextScenario = () => {
  showResultDialog.value = false
  
  if (currentScenario.value < totalScenarios.value) {
    currentScenario.value++
    resetScenario()
  } else {
    completeTraining()
  }
}

// 完成训练
const completeTraining = () => {
  finalScore.value = successCount.value * 80
  averageTrust.value = Math.round(trustLevel.value)
  
  const closingRate = Math.round((successCount.value / totalScenarios.value) * 100)
  if (closingRate >= 80) {
    performanceRating.value = 5
  } else if (closingRate >= 60) {
    performanceRating.value = 4
  } else if (closingRate >= 40) {
    performanceRating.value = 3
  } else {
    performanceRating.value = 2
  }
  
  // 更新总体统计
  gameStats.value.deals += successCount.value
  gameStats.value.points += finalScore.value
  gameStats.value.closingRate = Math.round(
    ((gameStats.value.closingRate * gameStats.value.deals + closingRate * successCount.value) /
    (gameStats.value.deals + successCount.value))
  )
  
  showCompleteDialog.value = true
}

// 重新训练
const restartTraining = () => {
  showCompleteDialog.value = false
  currentScenario.value = 1
  successCount.value = 0
  resetScenario()
}

// 返回
const goBack = () => {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.sales-training {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  border-radius: 12px;
  color: white;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: white;
}

.game-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: rgba(255, 255, 255, 0.8);
}

.game-stats :deep(.el-statistic__content) {
  color: white;
  font-weight: bold;
}

/* 模式选择 */
.mode-selection {
  padding: 40px;
  text-align: center;
}

.mode-selection h2 {
  margin-bottom: 40px;
  font-size: 24px;
  color: #303133;
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.mode-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.mode-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 48px;
}

.mode-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
}

.mode-card p {
  margin: 0 0 20px 0;
  color: #606266;
  line-height: 1.6;
}

.mode-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #909399;
  font-size: 14px;
}

/* 销售游戏 */
.sales-game {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}

.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.customer-profile,
.sales-tips {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.customer-profile {
  text-align: center;
}

.customer-profile h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.customer-profile h4 {
  margin: 12px 0;
  font-size: 18px;
  color: #303133;
}

.customer-info {
  text-align: left;
  margin: 16px 0;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
}

.customer-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}

.customer-mood,
.trust-level {
  margin-top: 16px;
}

.customer-mood span,
.trust-level span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.sales-tips h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.sales-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
  line-height: 2;
}

/* 主游戏区 */
.game-main {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.conversation-history {
  height: 400px;
  overflow-y: auto;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.message.salesperson {
  flex-direction: row-reverse;
}

.message-content {
  flex: 1;
  max-width: 70%;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.sender-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}

.message-time {
  font-size: 12px;
  color: #909399;
}

.message-text {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  line-height: 1.6;
  color: #303133;
}

.message.salesperson .message-text {
  background: #409eff;
  color: white;
}

.message-impact {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.message-impact.positive {
  color: #67c23a;
}

.message-impact.negative {
  color: #f56c6c;
}

.sales-stage {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.response-options h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.options-grid {
  display: grid;
  gap: 12px;
}

.option-card {
  background: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.option-card:hover {
  border-color: #409eff;
  background: white;
}

.option-card.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.option-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.option-text {
  margin: 0 0 8px 0;
  color: #303133;
  line-height: 1.6;
}

.option-effects {
  display: flex;
  gap: 16px;
  font-size: 13px;
}

.effect-item {
  color: #606266;
}

.effect-item .positive {
  color: #67c23a;
}

.effect-item .negative {
  color: #f56c6c;
}

.action-buttons {
  display: flex;
  justify-content: center;
}

/* 结果对话框 */
.result-content {
  padding: 20px;
  text-align: center;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.result-icon.success {
  background: #f0f9ff;
  color: #67c23a;
}

.result-icon.failed {
  background: #fef0f0;
  color: #f56c6c;
}

.result-content h3 {
  margin: 0 0 12px 0;
  font-size: 22px;
  color: #303133;
}

.result-content p {
  margin: 0 0 24px 0;
  color: #606266;
  line-height: 1.8;
}

.performance-analysis {
  margin: 24px 0;
  text-align: left;
}

.performance-analysis h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #303133;
}

.points-earned {
  margin-top: 20px;
}

/* 完成对话框 */
.complete-content {
  padding: 20px;
}

.final-score {
  text-align: center;
  margin-bottom: 30px;
}

.final-score h2 {
  margin: 0 0 16px 0;
  color: #303133;
}

.score-display {
  font-size: 60px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 16px;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
}

.stat-item span {
  display: block;
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.stat-item strong {
  font-size: 24px;
  color: #303133;
}

@media (max-width: 1200px) {
  .sales-game {
    grid-template-columns: 1fr;
  }
}
</style>

